<template>

    <div class="blog-detail">

        <div class="mblog">
            <div class="home-title">
                <h2>工具集</h2>
            </div>
        </div>

        <div class="friends-segment">
            <!--JSON-->
            <a :href="`https://www.json.cn/`" target="_blank" rel="external nofollow noopener" class="card"
               :style="randomRGB()">
                <el-button>JSON</el-button>
                <div class="content">
                    <div class="header">常用JSON工具</div>
                    <div class="description">常用JSON工具https://www.json.cn/</div>
                </div>
            </a>

            <!--代码比对-->
            <a :href="`https://www.json.cn/json/jsoncompare.html`" target="_blank" rel="external nofollow noopener" class="card"
               :style="randomRGB()">
                <el-button>代码比对</el-button>
                <div class="content">
                    <div class="header">代码比对</div>
                    <div class="description">代码比对代码比对</div>
                </div>
            </a>

            <!--文字转语音-->
            <a :href="`https://ttsmp3.com/`" target="_blank" rel="external nofollow noopener" class="card"
               :style="randomRGB()">
                <el-button>TTSMP3</el-button>
                <div class="content">
                    <div class="header">文字转语音</div>
                    <div class="description">国外开源免费的文字转语音，up配音首选必备</div>
                </div>
            </a>

            <!--cron七子表达式-->
            <a :href="`http://cron.ciding.cc/`" target="_blank" rel="external nofollow noopener" class="card"
               :style="randomRGB()">
                <el-button>七子表达式</el-button>
                <div class="content">
                    <div class="header">cron七子表达式</div>
                    <div class="description">cron七子表达式</div>
                </div>
            </a>

            <!--URL解码/编码-->
            <a :href="`http://www.senlt.cn/urlencode/`" target="_blank" rel="external nofollow noopener" class="card"
               :style="randomRGB()">
                <el-button>URL解码/编码</el-button>
                <div class="content">
                    <div class="header">URL解码/编码</div>
                    <div class="description">URL解码/编码</div>
                </div>
            </a>

            <!--SQL->业务代码-->
            <a :href="`http://java.bejson.com/generator/`" target="_blank" rel="external nofollow noopener" class="card"
               :style="randomRGB()">
                <el-button>SQL->业务代码</el-button>
                <div class="content">
                    <div class="header">SQL->业务代码</div>
                    <div class="description">SQL->业务代码</div>
                </div>
            </a>

            <!--Git练习地址-->
            <a :href="`https://learngitbranching.js.org/?locale=zh_CN`" target="_blank" rel="external nofollow noopener" class="card"
               :style="randomRGB()">
                <el-button>Git练习地址</el-button>
                <div class="content">
                    <div class="header">Git练习地址</div>
                    <div class="description">Git练习地址</div>
                </div>
            </a>

            <!--身份证生成器-->
            <a :href="`http://sfz.uzuzuz.com/`" target="_blank" rel="external nofollow noopener" class="card"
               :style="randomRGB()">
                <el-button>身份证生成器</el-button>
                <div class="content">
                    <div class="header">身份证生成器</div>
                    <div class="description">身份证生成器</div>
                </div>
            </a>

            <!--控制台图片-->
            <a :href="`https://www.bootschool.net/ascii`" target="_blank" rel="external nofollow noopener" class="card"
               :style="randomRGB()">
                <el-button>控制台图片</el-button>
                <div class="content">
                    <div class="header">控制台图片</div>
                    <div class="description">控制台图片</div>
                </div>
            </a>

            <!--图片base64互转 -->
            <a :href="`https://tool.chinaz.com/tools/imgtobase/`" target="_blank" rel="external nofollow noopener" class="card"
               :style="randomRGB()">
                <el-button>图片base64互转</el-button>
                <div class="content">
                    <div class="header">图片base64互转 </div>
                    <div class="description">图片base64互转</div>
                </div>
            </a>

            <!--网站图标制作-->
            <a :href="`https://tool.lu/favicon/`" target="_blank" rel="external nofollow noopener" class="card"
               :style="randomRGB()">
                <el-button>网站图标制作</el-button>
                <div class="content">
                    <div class="header">网站图标制作</div>
                    <div class="description">网站图标制作</div>
                </div>
            </a>

            <!--桌面壁纸-->
            <a :href="`http://ainyi.com:7654/krry_wallpaper/`" target="_blank" rel="external nofollow noopener" class="card"
               :style="randomRGB()">
                <el-button>桌面壁纸</el-button>
                <div class="content">
                    <div class="header">桌面壁纸</div>
                    <div class="description">桌面壁纸</div>
                </div>
            </a>

            <!--PDF转md-->
            <a :href="`https://pdf2md.morethan.io/`" target="_blank" rel="external nofollow noopener" class="card"
               :style="randomRGB()">
                <el-button>PDF转md</el-button>
                <div class="content">
                    <div class="header">PDF转md</div>
                    <div class="description">PDF转md</div>
                </div>
            </a>

            <!--在线P图-->
            <a :href="`https://pc.meitu.com/design/edit`" target="_blank" rel="external nofollow noopener" class="card"
               :style="randomRGB()">
                <el-button>在线P图</el-button>
                <div class="content">
                    <div class="header">在线P图</div>
                    <div class="description">在线P图</div>
                </div>
            </a>


            <!--白嫖全网音乐-->
            <a :href="`https://tool.liumingye.cn/music/#/`" target="_blank" rel="external nofollow noopener" class="card"
               :style="randomRGB()">
                <el-button>白嫖全网音乐</el-button>
                <div class="content">
                    <div class="header">白嫖全网音乐</div>
                    <div class="description">白嫖全网音乐</div>
                </div>
            </a>











            <!--<a :href="item.website" target="_blank" rel="external nofollow noopener" class="card" :style="randomRGB()"
               v-for="(item,index) in friendList" :key="index" @click="addViews(item.nickname)">
                <div class="image">
                    <img :src="item.avatar" onerror="this.src = 'http://thirdqq.qlogo.cn/g?b=oidb&k=swn39FmyYLe51OJdhSdcYw&s=640&t=1554693045'">
                </div>
                <div class="content">
                    <div class="header">{{ item.nickname }}</div>
                    <div class="description">{{ item.description }}</div>
                </div>
            </a>-->
        </div>

        <!--版权信息-->
        <div class="author-message">
            <ul class="list">
                <li>博客名称：呲哩博客</li>
                <li>博客地址：http://www.cilicili.top/</li>
                <li> 博客Logo：http://www.cilicili.top/favicon.ico</li>
                <li> 博客简介：谢谢你，Cheems!</li>
                <!--        <li>作者：coder-msc
                          <router-link style="text-decoration-line: none;" to="/about">（联系作者）</router-link>
                        </li>
                        <li>发表时间：{{ blog.createTime }}</li>
                        <li>最后修改：{{ blog.updateTime }}</li>
                        <li>本站点采用<a href="https://creativecommons.org/licenses/by/4.0/" style="text-decoration-line: none;"
                                    target="_blank"> 署名 4.0 国际 (CC BY 4.0) </a>创作共享协议。可自由转载、引用，并且允许商业性使用。但需署名作者且注明文章出处。
                        </li>-->
            </ul>
        </div>
        <div>
            <Comment></Comment>
        </div>
    </div>

</template>

<script>
    import 'github-markdown-css'

    export default {
        name: "Tools",
        components: {Comment:()=>import('@/components/Comment')},
        data() {
            return {
                blog: {},
                ownBlog: false,
                friendList: [],
                bgColor: [
                    '#1abc9c', '#2ecc71', '#3498db', '#9b59b6',
                    '#34495e', '#f1c40f', '#e67e22', '#e74c3c',
                    '#ee5a24', '#9980fa', '#8c7ae6', '#f79f1f'
                ],
                info: {
                    content: '',
                    commentEnabled: false
                }

            }
        },
        methods:{
            getFriendBlog(){
                const _this = this
                this.$axios.get('/friends').then(res => {
                    _this.blog = res.data.data


                    var MardownIt = require("markdown-it")
                    var md = new MardownIt()

                    var result = md.render(_this.blog.content)
                    _this.blog.content = result
                    if (_this.$store.getters.getUser) {
                        _this.ownBlog = (_this.blog.userId === _this.$store.getters.getUser.id)
                    }
                })
            },
            getFriendList(){
                const _this = this
                this.$axios.get('/friend/all').then(res => {
                    _this.friendList = res.data.data
                })

            },

            randomRGB() {
                const index = Math.floor((Math.random() * this.bgColor.length))
                return {backgroundColor: this.bgColor[index]}
            },
            // addViews(nickname){
            //     this.$axios.get('/friend/onclick?nickname='+nickname).then(res => {
            //
            //     })
            // }

        },
        created() {
            this.getFriendBlog()
            this.getFriendList()
        }
    }
</script>

<style scoped>
    .mblog {
        min-height: 0px;
        padding: 5px 35px 5px 35px;
        text-align: left;
    }

    .home-title {
        margin-bottom: 40px;
    }

    .markdown-body {
        text-align: left;
    }

    .blog-detail {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        background-color: white;
    }

    .author-message {
        text-align: left;
        background-color: honeydew;
        padding: 10px 5px 10px 5px;
        font-size: 14px;

    }

    .el-divider {
        margin: 1rem 0 !important;
    }






    .friends-segment {
        min-height: 300px;
        display: flex;
        flex-wrap: wrap;
        padding: 5px 35px 5px 35px;
        text-align: left;


    }

    .image{
        width: 70px;
        margin: 16px auto 0px;

    }
    .image img{
        width:100%;
        height:auto;
        border-radius: 100% !important;

    }
    .card {
        display: inline-block;
        width: 10vw;
        height: 17vh;
        margin: 12px 14px;
        text-align: center;
        border-radius: 5px;
        text-decoration-line: none;

    }

    .card .content .header {
        font-size: 16px !important;

    }
    .card .content {
        padding: 10px 2px;

    }

    .card .content .header {
        margin: -3px 0px 0px ;
    }
    .card .content .description {
        font-size: 12px !important;
        margin: 5px 0px 9px;
    }
    .card .content * {
        color: #fff !important;
    }


</style>